<template>
	<jiess :setup="setup" />
</template>

<script setup>
	import { Fold, Expand } from '@element-plus/icons-vue';
	import { ElIcon } from 'element-plus';
	import { useStore } from '@/store';
	import { watchEffect } from 'vue';
	import ToolBar from './ToolBar';
	const store = useStore();

	function setup() {
		const status = $ref(store.isCollapse);
		watchEffect(() => status.value = store.isCollapse);
		this.add({
			class: '_layout_base-nav h-50px flex items-center justify-between',
			children: [{
				class: '_left leading-0',
				children: {
					is: ElIcon,
					color: 'gray',
					class: 'cursor-pointer',
					onClick: () => store.isCollapse = !store.isCollapse,
					children: [
						{ is: Expand, $if: { $proxy: status } },
						{ is: Fold, $elseIf: true }
					]
				}
			}, { is: ToolBar }]
		})
	}
</script>